<template>
<div class="ArticleDetailBox">
   <div id="ArticleDetail" class="flex" v-if="show">
       <!-- 头部 -->
       <ADHead id="ADHead"/>
      <div class="funBox">
          <!-- 左侧功能 -->
          <LeftFun id="LeftFun" class="Fun flex"/>
      </div>
       <!-- 内容 -->
        <div class="Content" ref="Content">
            <!-- 图文 -->
            <TextImageShow v-if="ArticleDetail.classify == 1" class="box" />
            <!-- 视频 -->
            <VideoShow v-else-if="ArticleDetail.classify == 2" class="box" />
            <!-- MarkDown -->
            <MarkDownShow v-else-if="ArticleDetail.classify == 3" class="box overflow-auto-md"/>

             <div class="time">发布于 {{ArticleDetail.createdTime | time}}</div>

            <!-- 评论 -->
            <Discuss id="Discuss" class="box" ref="Discuss"/>
        </div>
         <!-- 右侧功能 -->
          <RightFun id="RightFun" class="Fun flex"/>

          <!-- 基本功能 手机端用 -->
          <Fun id="BaseFun" class="flex"/>

         <Reply v-if="ReplyState"/>

   </div>
   <ArticleDetailSet v-if="ArticleDetailSetState"/>
   <ArticleDetailAuthority v-if="ArticleDetailAuthorityState"/>
</div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import Discuss from './Discuss/Discuss.vue';
import ADHead from './ADHead/ADHead.vue'
import LeftFun from './LeftFun/LeftFun.vue';
import RightFun from './RightFun/RightFun.vue';
import TextImageShow from './ArticleContent/TextImageShow/TextImageShow.vue';
import VideoShow from './ArticleContent/VideoShow/VideoShow.vue';
import MarkDownShow from './ArticleContent/MarkDownShow/MarkDownShow.vue';
import Reply from './Reply/Reply.vue';
import Fun from './RightFun/Fun/Fun.vue';
import ArticleDetailSet from './ArticleDetailFun/ArticleDetailSet.vue';
import ArticleDetailAuthority from './ArticleDetailFun/ArticleDetailAuthority.vue';
  export default 
  {
     components: {  ADHead, LeftFun ,RightFun, Discuss, TextImageShow, VideoShow, MarkDownShow, Reply, Fun, ArticleDetailSet, ArticleDetailAuthority },
     computed:{
         ...mapState('ArticleDetail',['ArticleDetail','ArticleDetailSetState','ArticleDetailAuthorityState']),
         ...mapState('Setting',['Subject']),
         ...mapState('Discuss',['ReplyState']),
     },
     data() {
      return {
         show:true,
      }
     },
     methods:{
        ...mapMutations('Tool',['SETNAVIGATION','SETNAVIGATIONFLAG']),      //导航条状态 导航条背景状态
        init(){
           this.SETNAVIGATION([true,false])  
           this.SETNAVIGATIONFLAG(false)
            document.documentElement.scrollTop=0
            document.body.scrollTop = 0
           setTimeout(() => {
              this.SETNAVIGATIONFLAG(true)
           }, 500);
        }     
     } ,
     created(){
       this.init()
     },
     watch:{
         $route(newValue){ 
          
            this.show =false
            let timer2 =  setTimeout(() => {
               this.show =true
                 this.init()
               clearTimeout(timer2)
            }, 10);
     
         }
     }
     

  }
</script>
<style scoped lang='less'>
@media screen and (max-width: 1000px) {
   #LeftFun,#RightFun{ 
      display: none;
   } 
   div.Content{
      width: 90vw;
      margin: 10px 0;
      padding-bottom: 40px;
   } 
   div#BaseFun{
       display: flex;
       width: 90vw;
   }   
}
@media screen and (max-width: 600px) {
   #LeftFun,#RightFun{ 
      display: none;
   } 

   
}
.ArticleDetailBox{
   width: 100vw;
   height: 100vh;
   background: var(--BackColor);
   position: absolute;
   top: 0;
   margin-top: 0;
   // overflow-x: hidden;
}
#ArticleDetail{
   width: 100vw;
   position: absolute;
   top: 0;
   margin-top: 0;
   align-items: flex-start;
   background: var(--BackColor);
   min-height: calc( 100vh + 600px );
}
.funBox{
     min-width: calc( calc(100vw - 1000px) / 2);
     width: 25vw;
      min-height:100vh;
}
.Fun{
   min-width: calc(calc(100vw - 1000px) / 2);
   width: 25vw;
   position: sticky;
   top: 0px;
   padding: 20px 50px;
   max-height: 100vh;
   box-sizing: border-box;

}
#LeftFun{
   justify-content: flex-end;

}
#RightFun{
   justify-content: flex-start;
}

//头部
#ADHead{
   width: 100vw;
   height: 600px;

   overflow: hidden;
   position: relative;
   animation: topToBottom 0.5s linear ;
   background: none;
}
@keyframes topToBottom{
   from{
      transform: translateY(-30%);
   }
   to{
      transform: translateY(0);
   }
}
//内容
.Content{
   width: 50vw;
   max-width: 1000px;
   min-width: 350px;
   
   margin: 20px 0;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 10px;
   margin-bottom: 40px;
   background: var(--Pattern);
   box-shadow: var(--BoxShadow);
 
 
   .box{
      width: 100%;
   }
}
#Discuss{
   color: var(--fontColor);
}

#BaseFun{
   width: 50vw;
   max-width: 1000px;
   min-width: 350px;
   margin: 10px 0;
   padding: 10px 20px;
   box-sizing: border-box;
   background: var(--Pattern);
   box-shadow: var(--BoxShadow);
   border-radius:10px;
   
   justify-content: flex-start;

   display: none;

}
   .time{
      margin-top: 5px;
      width: 100%;
      letter-spacing: 0;
      text-align: right;
      color: #4D4D4D;  
    }
</style>